<template>
	<up-tabbar :value="tabIndex" activeColor="#007235" inactiveColor="#98A4B0" zIndex="999" :border="false">
		<up-tabbar-item :text="tab.name" :badge="tab.badge" @click="setTabIndex(tabI, true)" v-for="(tab, tabI) in tabbarList" :key="tabI" :class="{'center-item': tabI === 2}">
			<template #active-icon>
				<view :class="{'icon-wrapper': tabI === 2}">
					<image class="tabIcon" :class="[{'center-icon': tabI === 2}]" mode="aspectFit" :src="tab.activeIcon"></image>
				</view>
			</template>
			<template #inactive-icon>
				<view :class="{'icon-wrapper': tabI === 2}">
					<image class="tabIcon" :class="[{'center-icon': tabI === 2}]" mode="aspectFit" :src="tab.icon"></image>
				</view>
			</template>
		</up-tabbar-item>
	</up-tabbar>
</template>

<script setup>
import { useIndexStore } from '@/store/index';
import { storeToRefs } from 'pinia';
const indexStore = useIndexStore();
const { tabbarList, tabIndex } = storeToRefs(indexStore)
const { setTabIndex } = indexStore;
</script>

<style lang="scss" scoped>
.tabIcon{
	width: 40rpx;
	height: 40rpx;
}

.icon-wrapper {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: -50rpx;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.center-icon {
	width: 100rpx;
	height: 100rpx;
}

.center-item {
	margin-top: -30rpx;
}

::v-deep .u-tabbar {
	box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

::v-deep .u-tabbar-item__text {
	.center-item & {
		margin-top: -20rpx;
	}
}
</style>
